<template>
  <div class="u-login-about-container bind-container">
    <p class="bind-text">绑定微信</p>
    <ul class="bind-center">
      <li>
          <input type="tel" placeholder="请输入手机号码" maxlength="11" v-model="phone">
      </li>
      <li>
        <input type="tel" placeholder="请输入验证码" maxlength="4" v-model="authCode">
        <button class="u-send-msg-btn" v-if="!sendMsgFlag" @click="sendMsg" :disabled="sendMsgFlag">{{sendBtnText}}</button>
        <span class="times color-primary" v-if="sendMsgFlag">{{times}}</span>
      </li>
    </ul>
    <van-button round class="u-btn-default u-bg-gradient-light bind-btn" @click="loginWx()">绑定</van-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      phone: '', //手机号
      authCode: '', //验证码
      sendMsgFlag: false, //发送验证码按钮状态
      sendBtnText: '发送验证码', //发送验证码文字
      times: '60s', //倒计时文字
    }
  },
  methods: {
    sendMsg() { //发送验证码
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){ 
        this.$tool.toast('请输入正确的手机号')
        return; 
      }
      this.sendMsgAjax()
    },

    sendMsgAjax() { //验证码请求
      let postData = {
        phone: this.phone,
        smsType: 7
      }
      this.$api.post('/api/sms/send_sms', postData)
        .then((res) => {
          this.sendMsgFlag = true;
          this.countdown();
        })
    },

    countdown() { //倒计时
      let time = 60;
      let t = setInterval(() => {
          time--;
          this.times = `${time}s`;
          if(time <= 0){
            clearInterval(t)
            this.sendBtnText = '重新获取';
            this.sendMsgFlag = false;
            this.times = '60s';
          }
      }, 1000)
    },

    loginWx(){ //微信登录
      if(!this.$tool.validator.isEmpty(this.phone)){
        this.$tool.toast('请输入手机号')
        return;
      }

      if(!this.$tool.validator.isMobilePhone(this.phone)){
        this.$tool.toast('请输入正确的手机号')
        return;
      }

      if(!this.$tool.validator.isEmpty(this.authCode)){
        this.$tool.toast('请输入验证码')
        return;
      }

      if(!this.$tool.validator.isMsgCode(this.authCode)){
        this.$tool.toast('请输入4位数字验证码')
        return;
      }
      
      this.loginWxAjax()
    },

    loginWxAjax() { //绑定请求
      console.log('微信登录')
      let postData = {
        phone: this.phone,
        smsCode: this.authCode
      }
      this.$api.post('/api/wx/bind', postData)
        .then((res) => {
          this.$store.commit("setToken", res.data.token); //设置token
          this.$api.get('/api/user/detail?noLoading') //获取用户信息并放入vuex中
            .then((res) => {
              this.$store.commit("setUserInfo", res.data);
              this.$tool.toast('绑定成功', 800)
              setTimeout(() => {
                this.$router.push({path: '/'});
              }, 1000)
            })
        })
    }
  },

  mounted() {
    this.$tool.addEventListenerInputFocusout()
  }
};
</script>

<style lang="scss" scoped>
.bind-container {
  .bind-text {
    padding-top: 50px;
    font-size: 24px;
    font-weight: 500;
    color: #344047;
  }
  .bind-center {
      margin-top: 35px;
      li {
          display: flex;
          align-items: center;
          width: 100%;
          height: 60px;
          font-size: 16px;
          border-bottom: 1px solid #f2f2f2;
          input {
            height: 25px;
            flex: 1;
            font-size: 16px;
            outline: none;
            border: none;
            background-color: #fff;
          }
          .times {
            margin-left: 40px;
          }
      }
  }
  .bind-btn {
    margin-top: 32px;
  }
}
</style>